<template>
  <view class="redact-address">
    <view class="possess-layout">
      <view class="address-msg">
        <view class="msg-name">
          收货人：
        </view>
        <view class="msg-input">
          <input type="text" maxlength="20" placeholder="请填写收货人名称" @blur="consigneeNameInput" :value="addresInfo.consigneeName">
        </view>
        <view class="msg-right">
          <icon class="iconfont icon-wode09"></icon>
        </view>
      </view>
      <view class="address-msg">
        <view class="msg-name">
          联系电话：
        </view>
        <view class="msg-input">
          <input type="number" maxlength="11" placeholder="请填写收货人名称" @blur="phoneInput" :value="addresInfo.phone">
        </view>
       <view class="msg-right">
         <icon class="iconfont icon-call"></icon>
       </view>
      </view>
      <view class="address-msg">
        <view class="msg-name">
          收货地址：
        </view>
        <view class="msg-input" @click="select">
          <input type="text" placeholder="省市区县、乡镇等" value="{{addresInfo.consigneeRegion}}" @blur="consigneeRegionInput" :value="addresInfo.consigneeRegion">
        </view>
        <view class="msg-rights" @click="select">
          <icon class="iconfont icon-a-dingwei2"></icon>
          <text class="msg-rights-text">定位</text>
        </view>
      </view>
      <view class="address-msg">
        <view class="msg-name">
          详细地址：
        </view>
        <view class="msg-input">
          <input type="text" placeholder="街道、门牌号等" maxlength="50" placeholder-class="phcolor" @blur="detailedAddressInput" :value="addresInfo.detailedAddress">
        </view>
      </view>
      <view class="label">
        <view class="label-title">
          标签：
        </view>
        <view class="label-list">
          <block v-for="(labelList, i) in labelList" :key="i">
            <view class="label-text" :class="{active: i === addresInfo.labelDefault}" @click="chooseLabelSelect(labelList,i)">
              {{labelList}}
            </view>
          </block>
        </view>
      </view>
      <view class="default-setting">
        <view class="default-setting-left">
          <view class="default-setting-left-title">设置为默认地址</view>
          <view class="default-setting-left-prompt">提醒：每次下单会默认推荐使用该地址</view>
        </view>
        <view class="default-setting-right">
          <switch :checked="addresInfo.switchShow" color="#67de75" @change="switchChange"></switch>
        </view>
      </view>
      <view class="redact-address-determine" >
        <button type="primary" @click="submit">确认</button>
      </view>
    </view>
  </view>
  <view class="picker" animation="{{animationAddressMenu}}" :style="{visibility:addressMenuIsShow ? 'visible':'hidden'}">
      <view class="picker-view" animation="{{animationAddressMenu}}" :style="{visibility:addressMenuIsShow ? 'visible':'hidden'}">
        <view class='gangedBtn'>
          <text class="city-cancel" @tap="cityCancel">取消</text>
          <text style="float: right" @tap="citySure">确定</text>
        </view>
        <picker-view class='cont' @change="cityChange" value="{{value}}">
          <!-- 省 -->
          <picker-view-column>
            <view class="picker-item" v-for="(item,i) in provinces" :key="i">{{item.name}}</view>
          </picker-view-column>
          <!-- 市 -->
          <picker-view-column>
            <view  class="picker-item" v-for="(item,i) in citys" :key="i">{{item.name}}</view>
          </picker-view-column>
          <!-- 区 -->
          <picker-view-column>
            <view class="picker-item" v-for="(item,i) in areas" :key="i">{{item.name}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
</template>

<script setup>
  import {reactive, ref} from 'vue'
  import {onShow,onLoad} from '@dcloudio/uni-app'
  const labelList = ref(['家', '公司', '学校'])
  const date = ref('广东省')
  const switchChange = (e) => {
    addresInfo.switchShow = !addresInfo.switchShow
  }
  const getUserProvince = (e) => {
    console.log(e);
  }
  // 下拉框
    import addressData from '../../common/address.js'
    import { useStore } from 'vuex'
    const store = useStore()
    const value = ref(['0','0','0'])
    const provinces = ref([])
    const citys = ref([])
    const areas = ref([])
    const animationAddressMenu = reactive({})
    const addressMenuIsShow = ref(false)
    const addresInfo  =reactive({
        id: 0,
        consigneeName: '',
        phone: null,
        consigneeRegion : '',
        detailedAddress : '',
        labelDefault: 0,
        labelName: '家',
        switchShow: false
    })
    onLoad((option) => {
      let id = addressData[0].code
        provinces.value = addressData,
        citys.value = addressData[0].children,
        areas.value = addressData[0].children[0].children
        
        let editAddressInfo = null
        if(option.addressInfo) {
          editAddressInfo = JSON.parse(decodeURIComponent(option.addressInfo))
          addresInfo.id = editAddressInfo.id
          addresInfo.consigneeName = editAddressInfo.consigneeName
          addresInfo.phone = editAddressInfo.phone
          addresInfo.consigneeRegion = editAddressInfo.consigneeRegion
          addresInfo.detailedAddress = editAddressInfo.detailedAddress
          addresInfo.labelDefault = editAddressInfo.labelDefault
          addresInfo.labelName = editAddressInfo.labelName
          addresInfo.switchShow = editAddressInfo.switchShow
        }
    })
    // 当姓名input框的值发生改变时触发
    const consigneeNameInput = (e) => {
      addresInfo.consigneeName = e.detail.value
    }
    // 当手机号input框的值发生改变时触发
    const phoneInput = (e) => {
      addresInfo.phone = e.detail.value
    }
    // 当收货地区的input值发生改变时触发
    const consigneeRegionInput = (e) => {
      addresInfo.consigneeRegion = e.detail.value
    }
    // 当详细地址input值发生改变的时候触发
    const detailedAddressInput = (e) => {
      addresInfo.detailedAddress = e.detail.value
    }
    // 当标签发生修改触发
    const chooseLabelSelect = (labelName,i) => {
      addresInfo.labelDefault = i
      addresInfo.labelName = labelName
    }
  // 点击取消地址选框
    const cityCancel = () => {
      addressMenuIsShow.value = false
    }
    // 点击确定地址
    const citySure = () => {
      let indexVal = value.value
      console.log(provinces.value[indexVal[0]].name);
      let consigneeRegion = `${provinces.value[indexVal[0]].name + ' '}${citys.value[indexVal[1]].name === '市辖区'? '': citys.value[indexVal[1]].name + ' '}${areas.value[indexVal[2]].name}`
      addresInfo.consigneeRegion = consigneeRegion
      addressMenuIsShow.value = false
    }
    
    const cityChange = (e) => {
      let addressVal = e.detail.value
      let provinces = addresInfo.provinces
      let addressCitys = addresInfo.citys
      let addressAreas = addresInfo.areas
      let provinceNum = addressVal[0]
      let cityNum = addressVal[1]
      let countyNum = addressVal[2]
      if(value.value[0] !== provinceNum) {
        // value.value = [provinceNum, 0, 0]
        citys.value = addressData[provinceNum].children
        areas.value = addressData[provinceNum].children[cityNum].children.slice(1)
      }
        value.value = [provinceNum, cityNum, countyNum]
    }
   const submit = () => {
     if (addresInfo.consigneeName == "") {
           uni.$showMsg('请输入姓名', 'error')
           return false
      } else if (!/^1[3-9]\d{9}$/.test(addresInfo.phone)) {
        uni.$showMsg('号码格式错误', 'error')
        return false
      } else if(addresInfo.consigneeRegion === '') {
        uni.$showMsg( '请选择所在地区',  'error')
        return false
      } else if(addresInfo.detailedAddress === '') {
        uni.$showMsg( '请输入您的详细地址', 'error')
        return false
      } else {
        store.dispatch('user/updateAddress', addresInfo)
        uni.navigateBack({
          delta: 1,
        })
      }
   }
   console.log(store.state.user.address, '444');
    const select = () => {
      // 如果已经显示，不在执行显示动画
          if (addressMenuIsShow.value) {
            return false
          } else {
            // 执行显示动画
            startAddressAnimation(true)
          }
    }
     // 执行动画
     const startAddressAnimation = (isShow) => {
       let ani 
        if (isShow) {
          ani = wx.createAnimation({
                    delay: 0,
                    timingFunction: 'linear',
                    duration: 45
                }).translateY(0 + 'vh').step().export()
        } else {
          ani = wx.createAnimation({
                    delay: 0,
                    timingFunction: 'linear',
                    duration: 45
                }).translateY(40 + 'vh').step().export()
          }
          animationAddressMenu.value = ani
          addressMenuIsShow.value = isShow
      }
      onShow(() => {
        let animations = wx.createAnimation({
            duration: 500,
            timingFunction: 'linear',
          })
        console.log(animations, '222');
    })
</script>

<style lang="scss">
  
.redact-address {
  background: white;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  .possess-layout {
    .label {
       display: flex;
       align-items: center;
       height: 128rpx;
       padding: 0 20rpx;
       color: #333333;
       font-size: 30rpx;
       border-top: 2rpx solid #efefef;
      .label-title {
        width: 100rpx;
      }
      .label-list {
        display: flex;
        .label-text {
          min-width: 100rpx;
          height: 50rpx;
          line-height: 48rpx;
          text-align: center;
          border: 2rpx solid #999;
          border-radius: 30rpx;
          margin: 0 20rpx;
          &.active {
            background-color: #67de75;
          }
        }
      }
    }
    
    .address-msg {
      display: flex;
      align-items: center;
      height: 128rpx;
      border-top: 2rpx solid #efefef;
      padding: 0 20rpx;
      color: #333333;
      font-size: 30rpx;
      .msg-name {
        width: 200rpx;
      }
      .msg-input {
        flex: 1;
      }
      .msg-right {
        width: 32rpx;
        height: 32rpx;
      }
      .msg-rights {
        display: flex;
        height: 62rpx;
        line-height: 62rpx;
        .icon-a-dingwei2 {
          font-size: 40rpx;
          margin-right: 10rpx;
        }
      }
    }
    .default-setting {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 150rpx;
      padding: 0 20rpx;
      border-top: 2rpx solid #efefef;
      .default-setting-left {
        .default-setting-left-prompt {
          font-size: 24rpx;
          margin: 20rpx 0;
        }
      }
    }
    .redact-address-determine {
      margin-top: 50rpx;
      padding: 0 30rpx;
    }
  }
}
.phcolor {
  color: #999999;
}
.picker {
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 12;
  background-color: #fff;
  background: rgba(0, 0, 0, 0.2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0rpx;
}
.picker-view {
  width: 100%;
  display: flex;
  z-index: 12;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0rpx;
  height: 40vh;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}
 
.gangedBtn {
  border-top: 1px solid #efefef;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  width: 100%;
  height: 90rpx;
  padding: 0 66rpx;
  box-sizing: border-box;
  line-height: 90rpx;
  text-align: center;
  color: black;
  font-size: 0.8rem;
  display: flex;
  background: white;
  justify-content: space-between;
}
 
.cont {
  width: 100%;
  height: 389rpx;
}
 
.picker-item {
  line-height: 70rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  text-align: center;
}
 
.address {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-bottom: 1rpx solid #f1f1f1;
}
.city-cancel {
  color: gray;
}
</style>
